<template>
  <div class="product-container">
    <el-row>
      <el-col :span="24">
        <normal-filter :filterProps="filterProps" />
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary" icon="el-icon-plus" @click="addContent"
        >添加产品</el-button
      >
    </el-row>
    <el-row class="table-container">
      <Table
        :columnProps="columnProps"
        :tableData="tableData"
        :showHandle="true"
        :pagination="pagination"
        @currentPage="goCurrent"
        @delete="del"
        @modify="modify"
        @sizeChange="sizeChange"
      >
        <template slot-scope="scopes" slot="link">
          <span style="margin-left: 20px">
            <el-link
              @click="$router.push(`/product/data/${scopes.scope.row.id}`)"
              type="primary"
              :underline="false"
            >
              走势数据
            </el-link>
          </span>
          <div>
            <el-link
              @click="
                $router.push(`/product/brief/${scopes.scope.row.id}`)
              "
              type="primary"
              :underline="false"
            >
              组合介绍
            </el-link>
            <span style="margin-left: 20px">
              <el-link
                @click="
                  $router.push(`/product/guide/${scopes.scope.row.id}`)
                "
                type="primary"
                :underline="false"
              >
                购买指引
              </el-link>
            </span>
          </div>
        </template>

                <!-- <template slot-scope="scopes" slot="link">
          <span style="margin-left: 20px">
            <el-link
              @click="toggleBanner(scopes.scope.row)"
              type="primary"
              :underline="false"
            >
              {{ scopes.scope.row.isBanner ? "停用滚动" : "启用滚动" }}
            </el-link>
          </span>
        </template> -->
            </Table>
        </el-row>
    </div>
</template>

<script>
    import normalFilter from "@/components/NormalFilter";
    import Table from "@/components/Table";
    import { getList, update, delItem, toggleBanner } from "@/api/product";
    import { getList as getCombList } from "@/api/productComb";
    import { pagination, page } from "@/utils/enumConfig";
    import { Message } from "element-ui";
    import { ProudctType } from "@/utils/enumConfig";

    export default {
        name: "Product",
        components: {
            normalFilter,
            Table,
        },
        data() {
            const filterProps = {
                filterItems: [
                    {
                        type: "input",
                        id: "name",
                        title: "产品名称",
                        placeholder: "请输入",
                    },
                    {
                        type: "select",
                        title: "产品类型",
                        id: "productType",
                        placeholder: "请选择",
                        width: 200,
                        options: [
                            {
                                title: "全部",
                                key: "",
                                value: "",
                            },
                            {
                                title: "政信",
                                key: "1",
                                value: "政信",
                            },
                            {
                                title: "保险",
                                key: "0",
                                value: "保险",
                            },
                            {
                                title: "基金",
                                key: "3",
                                value: "基金",
                            },
                        ],
                    },
                ],
                onFilterChange: (value) => {
                    this.filterParam = value;
                    this.getList({
                        ...value,
                        ...page,
                    });
                },
            };
            const columnProps = [
                {
                    title: "产品ID",
                    dataIndex: "id",
                    key: "id",
                },
                {
                    title: "产品名称",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "所属产品组合",
                    dataIndex: "combinationName",
                    key: "combinationName",
                },
                {
                    title: "创建时间",
                    dataIndex: "createTime",
                    key: "createTime",
                },
                {
                    title: "产品类型",
                    dataIndex: "productType",
                    key: "productType",
                },
            ];
            return {
                filterProps,
                columnProps,
                list: [],
                tableData: [],
                pagination: this.$_.cloneDeep(pagination),
                filterParam: null,
            };
        },
        async created() {
            // await this.setCombFilter();
            let { pageIndex } = this.pagination;
            let param = {
                current: pageIndex,
            };
            this.getList(param);
        },
        methods: {
            addContent() {
                this.$router.push("/product/add");
            },
            goCurrent(currentIndex) {
                let { pageSize, pageIndex } = this.pagination;
                let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };
                this.getList(param);
            },
            modify({ id }) {
                this.$router.push({ path: `/product/update/${id}` });
            },
            sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this.getList(param);
    },
            async toggleBanner({ id, isBanner }) {
                let res = await toggleBanner({ id, isBanner: isBanner ? 1 : 0 });
                if (res.code === 1) {
                    Message({
                        message: "状态更新成功！",
                        type: "success",
                        duration: 1 * 1000,
                    });
                    let { pageIndex } = this.pagination;
                    this.getList({
                        ...this.filterParam,
                        current: 1,
                    });
                }
            },
            async del({ id }) {
                let res = await delItem({ id });
                if (res.code === 1) {
                    let { pageIndex } = this.pagination;
                    this.getList({
                        ...this.filterParam,
                        current: 1,
                    });
                }
            },
            async getList(param) {
                let { records, size, total, current } = await getList(param),
                    page = this.pagination;
                this.pagination = {
                    ...page,
                    totalElements: total,
                    pageIndex: current,
                };
                records.forEach((item) => {
                    item.isHot = item.isHot == 1 ? true : false;
                    item.isBanner = item.isBanner == 1 ? true : false;
                });
                this.tableData = records;
            },
            async switchIsHot(item) {
                let res = await update({ id: item.id, isHot: item.isHot ? 1 : 0 });
                if (res && res.code === 1) {
                    Message({
                        message: "状态更新成功！",
                        type: "success",
                        duration: 1 * 1000,
                    });
                    this.getList({
                        ...this.filterParam,
                        current: 1,
                    });
                }
            },
            async setCombFilter() {
                let res = await getCombList({ current: 0, size: 1000 });
                if (res) {
                    let typeList = res.records;
                    let _filterProps = this.filterProps;
                    let _filterItems = this.filterProps["filterItems"];
                    _filterItems.push({
                        type: "select",
                        id: "combinationName",
                        title: "所属产品组合",
                        placeholder: "请选择",
                        options: [
                            {
                                title: "全部",
                                key: null,
                                value: "",
                            },
                        ].concat(
                            typeList.map((item) => ({
                                title: item.name,
                                key: item.id,
                                value: item.name,
                            })),
                        ),
                    });
                    _filterProps["filterItems"] = _filterItems;
                    this.$set(this.filterProps, "filterItems", _filterItems);
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .product-container {
        width: 100%;
        height: 100%;
        padding: 20px;
        .table-container {
            margin-top: 20px;
        }
    }
</style>
